class Index{
    constructor(){
        this.login = document.querySelector(".floor");
        this.welcome = document.querySelector(".welcome");
        this.logout = document.getElementById("logout");
        this.uName = document.getElementById("userName")

        this.init();
        this.addEvent();
    }
    init(){
        this.m = sessionStorage.getItem("userMsg");
        this.m = this.m ? JSON.parse(this.m) : {};
        if(this.m.user){
            this.uName.innerHTML = this.m.user;
            this.login.style.display = "none";
            this.welcome.style.display = "flex";
        }
    }
    addEvent(){
        var that = this;
        this.logout.onclick = function(){
            sessionStorage.removeItem("userMsg");
            location.reload();
        }
    }
}
new Index;
class Car{
    constructor(){
        this.tBody = document.querySelector("tbody");
        this.car = document.querySelector(".car");
        this.shop = document.querySelector(".shop");
    }
    getData(){
        if(localStorage.getItem("goodsMsg").length>2){
            this.car.style.display = "none";
            this.shop.style.display = "none";
        }else{
            this.car.style.display = "block";
            this.shop.style.display = "block";
        }
        if(localStorage.getItem("goodsMsg")){
            this.gm = JSON.parse(localStorage.getItem("goodsMsg"));
        }else{
            this.gm = [];
        }
        this.display();
    }
    display(){
        var str = "";
        this.sunNum=0;
        var sumPrice=0;
        for(var i=0;i<this.gm.length;i++){
            str += `<tr index="${this.gm[i].goodsId}">
                        <td width=100><input type="checkbox"></td>
                        <td><img src="${this.gm[i].msg.img.smallImg[0]}" alt=""></td>
                        <td width=200>${this.gm[i].msg.name}</td>
                        <td>${this.gm[i].msg.price}</td>
                        <td><input type="number" min="1" value="${this.gm[i].num}" class="number"></td>
                        <td>${ parseInt(this.gm[i].msg.price * this.gm[i].num) }</td>
                        <td class="delete">删除</td>
                    </tr>`;
            sumPrice += this.gm[i].msg.price * this.gm[i].num;
            this.sunNum += parseInt(this.gm[i].num);
        }
        str += `<tr>
                    <td><input type="checkbox" class="all">全部选择</td>
                    <td colspan="4" align=right style="padding-right:60px;" class="sunNum">总数量：${this.sunNum}</td>
                    <td class="sumPrice">总价格：￥${sumPrice}</td>
                    <td class="deleteAll">全部删除</td>
                </tr>`
        this.tBody.innerHTML = str;
    }
    addEvent(){
        var that = this;
        var k = 0;
        this.tBody.onclick = function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className === "delete"){
                that.id = tar.parentNode.getAttribute("index");
                tar.parentNode.remove();
                that.changeData(function(i){
                    // console.log(1);
                    that.gm.splice(i,1);
                });
            }
            if(tar.className === "deleteAll"){
                tar.parentNode.parentNode.remove();
                that.gm=[];
                localStorage.setItem("goodsMsg",JSON.stringify(that.gm));
            }
            if(tar.className === "all"){
                if(k==0){
                    for(var j=0;j<that.tBody.children.length-1;j++){
                        that.tBody.children[j].firstElementChild.firstElementChild.checked="checked";		
                    }
                    console.log(1);
                    k=1;
                }else{
                    for(var j=0;j<that.tBody.children.length-1;j++){
                        that.tBody.children[j].firstElementChild.firstElementChild.checked="";		
                    }
                    console.log(0);
                    k=0;
                }
            }
        }
        this.tBody.oninput = function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className === "number"){
                that.id = tar.parentNode.parentNode.getAttribute("index");
                that.changeData(function(i){
                    that.gm[i].num = tar.value;
                });
                // console.log(tar.parentNode.previousElementSibling);
                tar.parentNode.nextElementSibling.innerHTML = tar.value * tar.parentNode.previousElementSibling.innerHTML;
                var n=0;
                var s=0;
                for(var i=0;i<that.gm.length;i++){
                    n+=parseInt(that.gm[i].num);
                    s+=parseInt(that.gm[i].msg.price)*parseInt(that.gm[i].num);
                }
                that.tBody.lastElementChild.firstElementChild.nextElementSibling.innerHTML = "总数量：" + n;
                that.tBody.lastElementChild.firstElementChild.nextElementSibling.nextElementSibling.innerHTML = "总价格：￥" + s;
            }
        }
    }
    changeData(cb){
        for(var i=0;i<this.gm.length;i++){
            if(this.gm[i].goodsId === this.id){
                cb(i);
                break;
            }
        }
        localStorage.setItem("goodsMsg",JSON.stringify(this.gm));
    }
}

var c = new Car();
c.getData();
c.addEvent();